import {
  request
} from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime.js';

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 输入框内容
    value: "",
    // 搜索到的商品数据
    searchData: [],
    // 是否隐藏取消按钮
    isHidden: true,
  },

  /**
   * 为什么要写在全局这里而不是Data内呢？
   * 因为 需要在前端显示的内容才需要写在Data中，最好这样！！！
   */
  // 定时器
  Timer: -1,

  /**
   * 输入框输入监听（bindinput），在电脑的微信开发工具中可能出现无效的现象，但是在真机上是没有这种BUG的。
   * 所以在测试的时候，我选择 （bindblur）失去焦点触发来测试。
   * 
   * 在使用（bindinput）来实现搜索要注意几点：
   *    1、每次输入字符，就会触发一次方法，也就发送一次请求，这么会太频繁太频繁太频繁了
   *       所以就需要 使用定时器，输入时每一秒才会触发发送请求方法
   *    （setTimeout  clearTimeout）
   */
  bindKeyInput: function(e) {
    const query = e.detail.value;

    // 使用定时器前最好清除下定时器
    clearTimeout(this.Timer);
    this.Timer = setTimeout(() => {
      this.qsearch(query);
    }, 1000)

  },

  /**
   * 发送请求，获取搜索商品推荐
   * @param query 关键字
   */
  async qsearch(query) {
    query = query.trim();
    // 搜索内容判断
    if (!query) {
      return;
    }
    const res = await request({
      url: "/goods/qsearch",
      data: {
        query
      }
    });
    this.setData({
      isHidden: false,
      searchData: res.message
    })
  },

  /**
   * 取消按钮监听
   *   1 清空输入框
   *   2 清空推荐列表
   */
  handleCancel(e) {
    this.setData({
      isHidden: true,
      value: "",
      searchData: []
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },
})